<!doctype html>
<html lang="en">
    <head>
        
        <title>PI</title>
        <meta charset="UTF-8" />
        
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/demo.css" /> <!-- estilo para tags gerais -->
        <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- form login/cadastro -->
        <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />  <!-- framework de animação quando se clica para mudar de formuluario -->     
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.10.3.custom.css" >   
        <link rel="shortcut icon" href="css/logo2.png" />
        
        <script src="js/modernizr.custom.79639.js"></script>    <!-- Modernizr detecta se o navegador suporta ou nao html5/css3 -->
        <script src="js/jquery-1.10.1.js"></script>   
        <script src="js/jquery-ui-1.10.3.custom.js"></script>
        <script src="js/jquery.validate.js"></script>
        <script src="js/autenticacao.js"></script>
        <script src="js/additional-methods.js"></script>

        <script>
            $(document).ready(function() {
                $("#btnlogar").click(function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: "login.php",
                        data: $("#frm-login").serialize(),
                        type: 'POST',
                        success: function(saida) {
                            data = JSON.parse(saida);
                            if (data.resp.status) {
                                document.location = data.resp.local;
                            } else {
                                alert("Login ou senha Incorreta");
                            }
                        }
                    });
                });

                $("#date").datepicker({
                    dateFormat: "yy-mm-dd",
                    monthNames: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                    dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
                    dayNamesShort: ["D", "S", "T", "Q", "Q", "S", "S"]
                });

                $('#telefone').hide();
                $('#inst').hide();
                $("#cbox").change(function() {
                    if ($('#cbox').prop("checked")) {
                        $('#valorCad').val("2");
                        $('#telefone').fadeIn(500);
                        $('#inst').fadeIn(500);
                    } else {
                        $('#valorCad').val("1");
                        $('#telefone').fadeOut(500);
                        $('#vrf_telefone').fadeOut(500);
                        $('#vrf_inst').fadeOut(500);
                        $('#inst').fadeOut(500);
                    }
                });
            });
        </script>
        <script>
            /* Validação login */
            $(function() {

                /* Validação cadastro */
                $("#frm-cadastrar").validate({
                    rules: {
                        nome: {
                            required: true, minlength: 3
                        },
                        sobrenome: {
                            required: true, minlength: 3
                        },
                        usuario: {
                            required: true, minlength: 3, remote: "verificaUsuario.php"
                        },
                        pas: {
                            required: true, minlength: 4
                        },
                        pas_conf: {
                            required: true, minlength: 4, equalTo: "#pas"
                        },
                        email: {
                            email: true, required: true, remote: "verificaUsuario.php"
                        },
                        dtnasc: {
                            required: true
                        }
                    },
                    messages: {
                        email: {
                            required: "Campo obrigatório.",
                            email: " Digite um e-mail válido.",
                            remote: "Este email já existe"
                        },
                        nome: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres.",
                        },
                        sobrenome: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres."
                        },
                        pas: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 4 caracteres."
                        },
                        pas_conf: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 4 caracteres.",
                            equalTo: "As senhas não correspondem."
                        },
                        dtnasc: {
                            required: "Campo obrigatório.",
                        },
                        usuario: {
                            required: "Campo obrigatório.",
                            minlength: "Mínimo de 3 caracteres.",
                            remote: "Este usuário já existe"
                        }
                    },
                    submitHandler: function() {
                        $.ajax({
                            url: "cadastroUsuario.php",
                            data: $("#frm-cadastrar").serialize(),
                            type: 'POST',
                            success: function(saida) {
                                data = JSON.parse(saida);
                                if (data.resp.status) {
                                    alert(data.resp.mensagem);
                                    document.location = data.resp.local;
                                } else {
                                    alert("Erro ao Cadastrar. Tente novamente mais tarde");
                                }
                            }
                        });
                    }
                });
            });

        </script>

    </head>
    <body>


        <div id="container" class="container">    
            <div id='navigation'>
            <ul>
                <li id="tblcontents"><p><span>Sobre</span></p></li>
            </ul>
            <a href="index.html" class="logo"></a> 
            </div>

            <div class="menu-panel">
                <h3>Sobre VAHA</h3>
                <ul id="menu-toc" class="menu-toc">
                      <li><img src="images/logo22.png"/></li>
                      <li>Venha Aprender Hardware Agora!</li>
                      <hr>
                </ul>
            </div>

            <section>               
                <div id="container_demo" >
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                         <div id="login" cl
                         ass="animate form">
                            <form  id="frm-login" action="login.php" method="POST" autocomplete="on"> 
                                <h1>Entrar</h1> 
                                <p> 
                                    <label for="login" class="uname" data-icon="u" > Seu login </label>
                                    <input name="login" required="required" type="text" />
                                </p>
                                <p> 
                                    <label for="pass" class="youpasswd" data-icon="p"> Sua senha </label>
                                    <input id="pass" name="pass" required="required" type="password"/> 
                                </p>
                                <p class="keeplogin"> 
                                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                                    <label for="loginkeeping">Mantenha-me conectado</label>
                                </p>
                                <p class="login button"> 
                                    <input id="btnlogar" type="submit" value="Login" /> 
                                </p>
                                <p class="change_link">
                                    Ainda não é um membro ?
                                    <a href="#toregister" class="to_register">Registre-se</a>
                                </p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="cadastroUsuario.php" method='GET' > 
                                <h1> Registre-se </h1> 
                                <p> 
                                    <label for="nome" class="uname" data-icon="u" > Nome</label>
                                    <input id="nome" name="nome" required="required" type="text" placeholder="Primeiro nome"/> 
                                </p>
                                 <p> 
                                    <label for="sobrenome" class="uname" data-icon="u" > Sobrenome</label>
                                    <input id="sobrenome" name="sobrenome" required="required" type="text" placeholder="Sobrenome"/> 
                                </p>
                                <p> 
                                    <label for="usuario" class="uname" data-icon="u">Usuário</label>
                                    <input id="usuario" name="usuario" required="required" type="text" placeholder="meunomedeusuario" />
                                </p>
                                <p> 
                                    <label for="email" class="youmail" data-icon="e" >Email</label>
                                    <input id="email" name="email" required="required" type="email" placeholder="meuemail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="pas" class="youpasswd" data-icon="p">Senha </label>
                                    <input id="pas" name="pas" required="required" type="password" placeholder="ex. duse789f"/>
                                </p>
                                <p> 
                                    <label for="pas_conf" class="youpasswd" data-icon="p">Por favor, confirme sua senha </label>
                                    <input id="pas_conf" name="pas_conf" required="required" type="password" placeholder="ex. duse789f"/>
                                </p>
                                <p> 
                                    <label for="date" class="youdate" >Data de Nascimento</label>
                                    <input id="date" name="dtnasc" required="required" type="text"/>
                                </p>
                                <p>
                                    <label for="cbox">Sou Professor</label>
                                    <input type="checkbox" name="cbox" id="cbox" value="1"/>
                                    <input type="hidden" id="valorCad" name="valorCad" value="1"/>
                                </p>
                                <p>
                                    <input type="text" id="telefone" name='telefone' placeholder="Telefone" />                                
                                </p>
                                <p>
                                    <input type="text" id="inst" name="inst" placeholder='Instituição de'/>
                                </p>
                                <p class="signin button"> 
                                    <input id='env_cad' type="submit" value="Registrar"/> 
                                </p>
                                <p class="change_link">  
                                    Aluno ? Entre aqui
                                    <a href="#tologin" class="to_register"> Entrar </a>
                                </p>
                            </form>
                        </div>
                        
                    </div>
                </div>  
            </section>

        </div>
  
        <!-- plugin para barra lateral -->
        <script src="js/jquery.jscrollpane.min.js"></script> <!-- Plugin jQuery que converte as barras de rolagem do navegador em uma estrutura HTML para manipulação-->
        <script src="js/jquery.bookblock.js"></script>
        <script src="js/page.js"></script> <!-- manipulação dos plugins -->
        <script>
            $(function() {

                Page.init();

            });
        </script>
    </body>
</html>

